<template>
	<view :class="[primarySize()]">
		<form @submit="bindSubmit">
			<view class="page-foot ">
				<view class="foot_btn">
				<button formType="submit" hover-class="none" class="btn1">提交</button>
				</view>
			</view>
			<view class="container bg-white">
				<view class="content_info">
					<view class="pb58">
						<input name="job_inform_type_id" hidden :value="typeId" />
						<view class="content_tit">举报类型</view>
						<view class="clearfix pt30">
							<view class="check_item" v-for="(item,index) in types" @click="check(item.id)">
                                <image :src="iconPath(item.id==typeId?'choose_sc.png':'choose_uc.png')" mode="aspectFit"></image>
								<view>{{item.name}}</view>
							</view>
						</view>
						<textarea name="content" maxlength="500" placeholder="请输入举报的详情原因..."  placeholder-class="cold7" class="fs24 col3 text_main"></textarea>
					</view>
					
					<view>
						<view class="content_tit">举报凭证<text>（非必填）</text></view>
						<view class="fs24 col3 pt15 pb25">如您保存的面试通知、公司环境等照片，请上传以便核实</view>
						<view class="clearfix upload_main pb20">
							<view v-for="(img,index) in images">
								<image :src="cdnurl(img)" mode="aspectFit"></image>
								<view class="close_img" @click="bindRemoveImage(index)">
									<image :src="iconPath('edit.png')" mode="widthFix"></image>
								</view>
							</view>
							<view @click="uploadImage">
								<image src="https://admin.mosizp.cn/static/public/upload_null.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					
				</view>
				<view class="plr30 pt50">
					<view class="fs24 col9">请填写您的联系方式，以便我们及时回复</view>
					<input type="number" name="contact" placeholder="请填写" maxlength="40"  class="fs32 col3 text_input" placeholder-class="coldc"></input>
				</view> 
			</view>
		</form>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				
				jobId: 0,
				types: [],
				typeId: null,
				images: [],
				maxImage: 12,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
		    this.$util.getJobInformTypes().then(types=>{this.types = types});
		    this.jobId = options.id;
		},
		methods: {
			check(id) {
			    this.typeId = id;
			},
			uploadImage(event) {
			    let page = this;
			    let availableCount = page.maxImage - page.images.length;
			    if(availableCount<1) {
			      uni.showToast({title: '最多12张图片',icon:'none'});
			      return;
			    }
			    uni.chooseImage({
			      count: availableCount,
			      success: res => {
			        res.tempFiles.forEach(function(file){
			          page.$core.uploadFile({
			            filePath: file.path,
			            success(ret, response) {
			              page.images.push(ret.data.url);
			            }
			          });
			        });
			      }
			    });
			},
			bindRemoveImage(index) {
			    this.images.splice(index, 1);
			},
			bindSubmit(event) {
			    let data =event.detail.value;
			    var rule = [
			    	{name: 'job_inform_type_id',rules: ['require'],errorMsg: {require: '请选择举报类型'}},
			    	{name: 'content',rules: ['require'],errorMsg: {require: '请填写举报原因'}},
			    ];
			    // 是否全部通过，返回Boolean
			    if (!validate.check(data, rule)) {
			        uni.showToast({
			            title: validate.getError()[0],
			            icon: 'none'
			        });
			        return;
			    }
			    data.job_id = this.jobId;
			    data.images = this.images.join(',');
			    this.$core.post({
			      url: '/xilujob.job/inform', data: data,
			      success(ret) {
			        uni.showModal({
			        	title: '提示',
						content: '谢谢您的举报，我们会认真核实',
						showCancel: false,
						success(res) {
							uni.navigateBack()
						}
			        })
			      }
			    });
			}
		}
	}
</script>

<style lang="scss" scoped>
.content_info{padding: 20rpx 30rpx;border-bottom: 9rpx solid #F4F4F4}
.content_tit{font-size: 36rpx;color: #000}
.check_item{min-width: 50%;box-sizing: border-box;padding-right: 30rpx;float: left;margin-bottom: 22rpx;}
.check_item view{font-size: 24rpx;color: #333;display:inline-block;vertical-align: middle;}
.check_item image{width: 28rpx;height: 28rpx;display:inline-block;vertical-align: middle;margin-right: 14rpx;}
.text_main{width: 100%;height: 247rpx;display: block;border: 1rpx solid #E1E1E1;padding: 27rpx 22rpx;box-sizing: border-box;margin-top: 10rpx;}
.content_tit text{font-size: 24rpx;color: #999999}
.pb58{padding-bottom: 58rpx;}
.ptb15{padding-top: 15rpx;padding-bottom: 15rpx;}
.upload_main>view{width: 184rpx;height: 184rpx;float: left;position: relative;margin-right:20rpx;}
.upload_main image{width: 100%;height: 100%;display: block}
.close_img image{width: 26rpx;height: 26rpx;}
.close_img{position: absolute;right: -13rpx;top: -13rpx;}
.pb25{padding-bottom: 25rpx;}
.text_input{line-height: 95rpx;height: 95rpx;}
.pt50{padding-top: 50rpx;}
.coldc{color: #dcdcdc}
.foot_btn{padding: 10rpx 30rpx;background-color: #fff;}
.upload_btn{border-radius: 10rpx;width: 100%;height: 87rpx;line-height: 87rpx;background-color:#FF7100 ;font-size: 30rpx;color: #fff;}
</style>
